<template>
    <div>
        <div class="branch">
            <div class="container">
                <div class="head">
                    <div class="iconfont" @click="$router.back()">
                        &#xe624;
                    </div>
                    <h1>菜谱分类</h1>
                    <div class="iconfont" @click="search">
                        &#xeb86;
                    </div>
                </div>
                <div class="content">
                    <div class="tabs">
                        <ul>
                            <li v-for="(item,index) in obj.tabs" :key="index" 
                            :class="[obj.show == index ? 'con' : '']" 
                            @click="(obj.show = index)">
                                {{item}}
                            </li>
                        </ul>
                    </div>
                    <div class="tabody">
                        <div class="tcont" v-for="(item,index) in obj.tabody" :key="index" v-show="(obj.show == index)">
                            <div class="list" v-for="(val,ind) in item" :key="ind">
                                <div class="list_top" @click="go(val.name)">
                                    <img :src="val.image_url" alt="">
                                </div>
                                <ul>
                                    <li v-for="(li,i) in val.cs" :key="i" @click="go(li.name)">
                                        {{li.name}}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getJsonBranch } from "../api/branch.js";
import { reactive } from '@vue/runtime-core';
import { useRouter } from 'vue-router'
import { useStore } from "../store/index";
export default {
    setup(){
            let store = useStore(); 
            let router = useRouter();
            let obj = reactive({
                tabs:[],
                tabody:[],
                show:0
            })
            function go(val) {
                store.search = val;
                router.push({
                    path: '/searlist',
                    query: {
                        id: val
                    }
                })
            }
            function search() {//跳转搜索
                router.push({
                    path: '/search'
                })
            }
            getJsonBranch().then(data =>{
                data.result.cs.forEach(item =>{
                    obj.tabs.push(item.name);
                    obj.tabody.push(item.cs);

                })
                console.log(obj.tabs);
                console.log(obj.tabody);
               
            })

            return{
                obj,
                go,
                search
            }
        }
    }
</script>

<style lang="scss" scoped>
.branch{
    .head{
        display: flex;
        justify-content: space-between;
        padding: 16px;
        align-items: center;
        border-bottom: 2px solid #f0f0f0;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        z-index: 10;
        .iconfont{
            font-size: 20px;
        }
        h1{
            font-size: 20px;
            font-weight: normal;
        }

    }
    .content{
        display: flex;
        .tabs{
            position: sticky;
            left: 0;
            top: 0;
            overflow-y: scroll;
            height: 100vh;
            ul{
                li{
                    font-size: 13px;
                    color: #424242;
                    position: relative;
                    text-align: center;
                    padding: 16px 8px;
                    &::after{
                        content: "";
                        width: 5px;
                        height: 22px;
                        border-radius: 2px;
                        
                        display: block;
                        position: absolute;
                        right: 0px;
                        top: 16px;
                    }
                }
                .con{
                    color: #333;
                    &::after{
                        background-color: #f6dc6d;
                    }
                }
            }
        }
        .tabody{
            flex:4;
            .tcont{
                .list{
                    padding: 10px;
                    .list_top{
                        img{
                            background-color: #f6dc6d;
                            display: block;
                            width: 100%;
                        }
                        padding-right: 10px;
                    }
                    ul{
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                        padding-top: 10px;
                        li{
                            padding: 6px 11px;
                            font-size: 14px;
                            color: #4e4e4e;
                            border: 1px solid #f4f4f4;
                            border-radius: 4px;
                            margin-bottom: 16px;
                            margin-right: 10px;
                        }
                    }
                }

            }
        }
    }
}
</style>